<template>
  <div class="container">
    <div class="table-data">
      <el-card class="box-card">
        <el-row
          style="
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <el-col :span="10">
            <!-- 新增 -->
            <el-button
              type="warning"
              icon="el-icon-plus"
              size="small"
              @click="bannertext"
              >新增</el-button
            >

            <!-- 编辑 -->
            <!-- <el-button type="primary" icon="el-icon-edit" size="small" disabled
              >修改</el-button
            > -->

            <!-- 删除 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="deletemore"
              >删除</el-button
            >
          </el-col>

          <el-col :span="4" :offset="10">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>
        <!-- banner图-添加 -->
        <div v-if="EDIshow" class="editorclass">
          <h1 class="title">添加banner图</h1>
          <el-form :model="form" class="editorform">
            <el-form-item label="标题" :label-width="formLabelWidth">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="banner图" :label-width="formLabelWidth">
              <!-- <el-button
                type="primary"
                @click="onlocalimg"
                :disabled="localimg == true"
                >上传本地图片</el-button
              >
              <el-button
                type="primary"
                @click="onlineimg"
                :disabled="lineimg == true"
                >上传网上图片</el-button
              > 
              <el-input
                v-model="form.pic"
                autocomplete="off"
                v-if="lineimgchange"
                placeholder="请输入网上图片链接"
              ></el-input>-->
              <!-- 上传图片 -->
              <!-- <div v-if="localimgchange"> -->
                 <!-- :data="{ img: imgUrl }" -->
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="http://api_dev.wanxikeji.cn/api/admin/bannerAddModify"
                  :on-change="handleChange"
                  :limit="1"
                  :http-request="uploadFile"
                  :on-remove="handleRemove"
                  :show-file-list="false"
                  :on-exceed="handleExceed"
                >
                  <el-button slot="trigger" size="small" type="success"
                    >上传图片</el-button
                  >
                  <el-form-item label prop="img">
                  <img :src="form.pic" width="100px" style="height:100px" />
                </el-form-item>
                  <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件
                  </div>
                </el-upload>
              <!-- </div> -->
            </el-form-item>
            <el-form-item
              label="目标页面"
              :label-width="formLabelWidth"
              class="txtarea"
            >
              <el-input
                type="textarea"
                v-model="form.describe"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="bannerbtn">
            <el-button
              type="danger"
              icon="el-icon-edit-outline"
              @click="offbannertext"
              >取消</el-button
            >
            <el-button
              type="success"
              icon="el-icon-edit-outline"
              @click="addbannertext"
              >提交</el-button
            >
          </div>
        </div>
        <!-- banner图-修改 -->
        <div v-if="EDIchange" class="editorclass">
          <h1 class="title">信息修改</h1>
          <el-form :model="changeform" class="editorform">
            <el-form-item label="编号" :label-width="formLabelWidth">
              <el-input
                v-model="changeform.id"
                autocomplete="off"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="标题" :label-width="formLabelWidth">
              <el-input
                v-model="changeform.title"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="Banner图" :label-width="formLabelWidth">
              <!-- <el-button
                type="primary"
                @click="onlocalimg"
                :disabled="localimgchange == true"
                >上传本地图片</el-button
              >
              <el-button
                type="primary"
                @click="onlineimg"
                :disabled="lineimgchange == true"
                >上传网上图片</el-button
              >
              <el-input
                v-model="changeform.pic"
                autocomplete="off"
                v-if="lineimgchange"
                placeholder="请输入网上图片链接"
              ></el-input> -->
              <!-- 上传图片 -->
              <!-- <div v-if="localimgchange"> -->
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="http://api_dev.wanxikeji.cn/api/admin/bannerAddModify"
                  :show-file-list="false"
                  :on-change="handleChange"
                  :http-request="uploadFile2"
                  :on-remove="handleRemove2"
                  :limit="1"
                  :on-exceed="handleExceed2"
                >
                  <el-button slot="trigger" size="small" type="success"
                    >上传图片</el-button
                  >
                  <el-form-item label prop="img">
                  <img :src="changeform.pic" width="100px" style="height:100px" />
                </el-form-item>
                  <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件
                  </div>
                </el-upload>
              <!-- </div> -->
            </el-form-item>
            <el-form-item
              label="目标页面"
              :label-width="formLabelWidth"
              class="txtarea"
            >
              <el-input
                type="textarea"
                v-model="changeform.describe"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="bannerbtn">
            <el-button
              type="danger"
              icon="el-icon-edit-outline"
              @click="offchangetext"
              >取消</el-button
            >
            <el-button
              type="success"
              icon="el-icon-edit-outline"
              @click="changetext"
              >提交</el-button
            >
          </div>
        </div>
        <el-table
          v-if="TABLEshow"
          :data="dataShow"
          stripe
          border
          @selection-change="selectionchange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <!-- <el-table-column label="token" prop="token"> </el-table-column> -->
          <el-table-column label="编号" prop="id"> </el-table-column>
          <el-table-column label="标题" prop="title"> </el-table-column>
          <el-table-column label="Banner图" prop="pic" width="150">
            <template slot-scope="scope">
              <el-image
                :src="scope.row.pic"
                width="70"
                style="height: 70px"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column label="目标页面" prop="describe"> </el-table-column>
          <!-- <el-table-column label="作品内容" prop="info"> </el-table-column> -->
          <el-table-column label="操作" width="220px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-edit-outline"
                @click="handleEdit(scope.$index, scope.row)"
              ></el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
              ></el-button>
              <el-button
                size="mini"
                type="danger"
                @click="forbiddendata(scope.$index, scope.row)"
                >{{
                  alldataShow[alldataShow.indexOf(scope.row)].status == 3
                    ? isforbidden
                    : forbidden
                }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div v-if="TABLEshow">
          <el-pagination
            style="margin-top: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[4, 6, 8, 10]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="arraylength"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import editors from "../wangeditor";
export default {
  components: {
    editors,
  },
  data() {
    return {
      EDIshow: false,
      TABLEshow: true,
      EDIchange: false,
      imgUrl: "",
      namesearch: "",
      form: {
        id: "",
        title: "",
        pic: "",
        describe: "",
      },
      changeform: {
        id: "",
        title: "",
        pic: "",
        describe: "",
      },
      dataShow: [],
      alldataShow: [],
      formLabelWidth: "120px",
      currentPage4: 1,
      arraylength: 0,
      pagesize: 4,
      page: 1,
      moment: [],
      deleteall: [],
      changearr: [],
      indexnum: 0,
      imgfile: "",
      localimg: true,
      lineimg: false,
      lineimgchange: true,
      localimgchange: false,
      isforbidden: "已禁用",
      forbidden: "禁用",
    };
  },
  methods: {
    // 上传本地图片
    onlocalimg() {
      this.localimg = true;
      this.lineimg = false;
      this.lineimgchange = false;
      this.localimgchange = true;
      this.form.pic = "";
      this.changeform.pic = "";
    },
    onlineimg() {
      this.localimg = false;
      this.lineimg = true;
      this.lineimgchange = true;
      this.localimgchange = false;

      this.form.pic = "";
      this.changeform.pic = "";
    },
    //   添加按钮
    bannertext() {
      this.EDIchange = false;
      this.EDIshow = true;
      this.TABLEshow = false;
      this.form = {
        id: "",
        title: "",
        pic: "",
        describe: "",
      };
    },
    // 取消添加
    offbannertext() {
      this.EDIshow = false;
      this.TABLEshow = true;
    },
    handleChange(file, fileList) {
      // console.log("changefile", file);
      // this.imgfile = file.raw;
    },
    uploadFile(file) {
      let formDatas = new FormData();
      formDatas.append('file', file.file);
      console.log(1111);
      this.$http.post('/api/saveFile', formDatas).then(res => {
        // console.log('封面',res)

        if (res.data.msg == '保存成功') {
          console.log(3333);
          this.form.pic = `http://api_dev.wanxikeji.cn/${res.data.data}`
        }
      })
    },
    uploadFile2(file) {
      let formDatas = new FormData();
      console.log(file.file);
      formDatas.append('file', file.file);
      console.log(formDatas);
      console.log(this.changeform.pic);
      this.$http.post('/api/saveFile', formDatas).then(res => {
        // console.log('封面',res)

        if (res.data.msg == '保存成功') {
          console.log(12345);
          this.changeform.pic = `http://api_dev.wanxikeji.cn/${res.data.data}`
        }

      })
    },
    // 限制文件传输数量
    handleExceed(files, fileList) {
      // this.$message.warning(
      //   `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
      //     files.length + fileList.length
      //   } 个文件`
      // );
      this.handleRemove(files, fileList);
      let formDatas = new FormData();
      formDatas.append('file', files["0"]);
      this.$http.post('/api/saveFile', formDatas).then(res => {
        if (res.data.msg == '保存成功') {
          this.form.pic = `http://api_dev.wanxikeji.cn/${res.data.data}`
        }
      })
    },
    handleExceed2(files, fileList) {
      this.handleRemove(files, fileList);
      let formDatas = new FormData();
      formDatas.append('file', files["0"]);
      this.$http.post('/api/saveFile', formDatas).then(res => {
        if (res.data.msg == '保存成功') {
          this.changeform.pic = `http://api_dev.wanxikeji.cn/${res.data.data}`
        }
      })
    },
    handleRemove(val, vals) {
      vals.splice(vals.length - 1, 1)
    },
    handleRemove2(val, vals) {
      vals.splice(vals.length - 1, 1)
    },
    // 上传到服务器
    submitUpload() {
      // this.$refs.upload.submit();
      console.log("this.imgfile", this.imgfile);
      let formData = new FormData();
      formData.append("file", this.imgfile);
      this.$http.post("/api/saveFile", formData).then((res) => {
        console.log(res.data.data);
        let imgUrl = "http://api_dev.wanxikeji.cn/" + res.data.data;
        console.log("imgUrl=", imgUrl);
        this.form.pic = imgUrl;
        // 获取token
        let token = sessionStorage.getItem("token");
        // 获取title
        let title = this.form.title;
        // 获取pic
        let pic = this.form.pic;
        // 获取describe
        let describe = this.form.describe;
        // 通过接口添加数据
        this.$http
          .post("api/admin/bannerAddModify", {
            token: token,
            title: title,
            pic: pic,
            url: describe,
          })
          .then((res) => {
            console.log("添加数据", res);
            // 渲染数据
           this.getSliderData();
          });
      });
    },
    // 添加banner内容
    addbannertext() {
      this.EDIshow = false;
      this.TABLEshow = true;
      if (this.form.pic == "") {
        // 上传本地图片
        this.submitUpload();
      } else {
        // 获取token
        let token = sessionStorage.getItem("token");
        // 获取title
        let title = this.form.title;
        // 获取pic
        let pic = this.form.pic;
        // 获取describe
        let describe = this.form.describe;
        // 通过接口添加数据
        this.$http
          .post("api/admin/bannerAddModify", {
            token: token,
            title: title,
            pic: pic,
            url: describe,
          })
          .then((res) => {
            console.log("添加数据", res);
            // 渲染数据
           this.getSliderData();
          });
      }
    },
    // 取消修改
    offchangetext() {
      this.EDIchange = false;
      this.TABLEshow = true;
    },
    // 渲染数据
    drawing() {
      // 获取token
      this.token = sessionStorage.getItem("token");
      this.dataShow = this.alldataShow
    },

    // 提交修改
    changetext() {
      this.EDIchange = false;
      this.TABLEshow = true;
      if (this.changeform.pic == "") {
        // this.$refs.upload.submit();
        let formData = new FormData();
        formData.append("file", this.imgfile);
        this.$http.post("/api/saveFile", formData).then((res) => {
          console.log(res.data.data);
          let imgUrl = "http://api_dev.wanxikeji.cn/" + res.data.data;
          console.log("imgUrl=", imgUrl);
          this.changeform.pic = imgUrl;
          // 获取token
          let token = sessionStorage.getItem("token");
          // 获取title
          let title = this.changeform.title;
          // 获取pic
          let pic = this.changeform.pic;
          // 获取describe
          let describe = this.changeform.describe;
          // 获取id
          let id = this.changeform.id;
          // 通过接口添加数据
          this.$http
            .post("api/admin/bannerAddModify", {
              token: token,
              title: title,
              pic: pic,
              url: describe,
              id: id,
            })
            .then((res) => {
              console.log("添加数据", res);
              // 渲染数据
             this.getSliderData();
            });
        });
      } else {
        // 获取token
        let token = sessionStorage.getItem("token");
        // 获取title
        let title = this.changeform.title;
        // 获取pic
        let pic = this.changeform.pic;
        // 获取describe
        let describe = this.changeform.describe;
        // 获取id
        let id = this.changeform.id;
        // 通过接口修改数据
        this.$http
          .post("api/admin/bannerAddModify", {
            token: token,
            title: title,
            pic: pic,
            url: describe,
            id: id,
          })
          .then((res) => {
            console.log("修改数据", res);
            // 渲染数据
          this.getSliderData();
          });
      }
    },
    // 添加作品数据
    addwork() {},
    // 刷新
    refresh() {
      this.namesearch = "";
    },
    // 搜索数据
    searchdata() {},
    // selection删除
    selectionchange(value) {
      console.log("selectionchange==", value);
      // this.tableData1.forEach(element => {
      //  this.tableData1.splice(this.tableData1.indexOf(value),1)
      // });
      this.deleteall = value;
      console.log("this.deleteall==============", this.deleteall);
    },
    // 删除多条数据
    deletemore() {
      console.log("deletemore");
      let maxpage = Math.ceil(this.alldataShow.length / this.pagesize);
      this.deleteall.forEach((element) => {
        // 获取token
        let token = sessionStorage.getItem("token");
        // 获取id
        let id = element.id;
        // 通过id删数据
        this.$http
          .post("api/admin/bannerDelete", {
            token: token,
            id: id,
          })
          .then((res) => {
            console.log("删除多条数据", res);

            this.arraylength = this.alldataShow.length;
            // 渲染数据
          this.getSliderData();
          });
      });
      // 渲染数据
    },

    // 信息修改
    handleEdit(index, row) {
      console.log(row);
      // 设置id数据
      this.EDIchange = !this.EDIchange;
      this.TABLEshow = !this.TABLEshow;
      this.changeform.id = row.id;
      this.changeform.title = row.title;
      this.changeform.pic = row.pic;
      this.changeform.describe = row.describe;
      // 数据索引
      //   根据id调用接口修改数据
      let token = sessionStorage.getItem("token");
      //   this.$http
      //     .post("api/admin/bannerAddModify", {
      //       token: token,
      //       title: this.changeform.title,
      //       pic: this.changeform.pic,
      //       url: this.changeform.describe,
      //       id: this.changeform.id,
      //     })
      //     .then((res) => {
      //       console.log("res", res);
      //     });
    },
    // 删除单条数据
    handleDelete(index, row) {
      // 获取token
      let token = sessionStorage.getItem("token");
      // 获取id
      let id = row.id;
      // 通过接口删除数据
      this.$http
        .post("api/admin/bannerDelete", {
          token: token,
          id: id,
        })
        .then((res) => {
          console.log("删除数据", res);
          // 渲染数据
         this.getSliderData();
        });
    },
    // 分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      // 渲染数据
      this.getSliderData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      // 渲染数据
      this.getSliderData();
    },
    // banner禁用
    forbiddendata(index, row) {
      // 获取token
      let token = sessionStorage.getItem("token");
      // 获取id
      let id = row.id;
      // 通过接口禁用数据
      this.$http
        .post("api/admin/bannerBan", {
          token: token,
          id: id,
        })
        .then((res) => {
          console.log("禁用数据", res);
          // 渲染数据
          this.getSliderData();
        });
    },
    // handleSizeChange() {},
    // handleCurrentChange() {},
    // handleSelectionChange() {},
    getSliderData(){
      var newdata = [];

    // 通过接口获取作品数据
    this.$http
      .post("api/admin/bannerList", {
        token: this.token,
        page:this.page,
        size:this.pagesize,
      })
      .then((res) => {
        console.log(res);
        newdata = res.data.data.data;
        console.log(newdata);
        // 数组赋值
        this.alldataShow = [];
        newdata.forEach((element) => {
          var arr = { id: "", title: "", pic: "", describe: "", status: "" };
          arr.describe = element.url;
          arr.pic = element.pic;
          arr.title = element.title;
          arr.id = element.banner_id;
          arr.status = element.status;
          this.alldataShow.push(arr);
        });
        // this.alldataShow.reverse();
        // 根据id排序
        this.alldataShow.sort(function (a, b) {
          return a.id - b.id;
        });
        this.arraylength = res.data.data.count;
        console.log(this.arraylength);
        this.drawing();
      });
    }
  },
  // 监听搜索框状态
  watch: {
    namesearch: {
      handler: function (newVal, oldVal) {
        // 修改radio
      },
      deep: true,
    },
    namesearch: {
      handler: function (newVal, oldVal) {},
      deep: true,
    },
  },
  mounted() {
    // 获取token
    this.token = sessionStorage.getItem("token");
    this.getSliderData();

  },
};
</script>

<style lang="less" scoped>
//
.top-btn {
  display: flex;
  /* height: 60px; */
}
.el-icon-refresh-left {
  display: flex;
  align-items: center;
}
.el-table .white {
  background: white;
}
.el-table .blue {
  background: rgb(18, 191, 235);
}
.el-table .red {
  background: rgb(236, 92, 66);
}
.el-table .purple {
  background: rgb(230, 108, 179);
}
.editorclass {
  padding: 0 50px 0 0;
}
.editorform {
  display: flex;
  // justify-content: flex-start;
  flex-direction: column;
}
.txtarea {
  width: 98%;
}
.title {
  display: flex;
  justify-content: center;
}
.bannerbtn {
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
// 公共table
/deep/.el-table__body-wrapper {
  font-size: 13px;
}
.container {
  min-height: 850px;
  background: #f6f6f6;
  padding-top: 20px;

  .table-data {
    padding: 0 20px;
  }

  .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-form-item__label {
    width: 80px !important;
  }
  /deep/.el-input {
    width: 98%;
  }
}
</style>
